<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue.js简易计算器</title>
    <style>
    * { width: 0; padding: 0;}
    #app { width: 480px; margin: 0 auto;}
    input[type='number'] { width: 35%; height: 22px; padding: 6px 12px;}
    #op { width: 15%; height: 40px; text-align: center;}
    #btn { width: 46px; height: 26px;}
    p { width: 100%; }
    </style>
</head>
<body>
    <div id="app">
        <input type="number" id="numa" v-model="numa">
        <select name="op" id="op" v-model="op">
            <option value="">请选择</option>
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="number" id="numb" v-model="numb">
        <button id="btn" @click="doSum">=</button>
        <p>结果：{{ sum }}</p>
    </div>

</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            numa: 0,
            numb: 0,
            sum: 0,
            op : ''
        },
        methods: {
            doSum: function() {
                switch (this.op) {
                    case "":
                        this.sum = "请选择运算符";
                        break;
                    case "+":
                        this.sum = parseInt(this.numa) + parseInt(this.numb);
                        break;
                    case "-":
                        this.sum = parseInt(this.numa) - parseInt(this.numb);
                        break;
                    case "*":
                        this.sum = parseInt(this.numa) * parseInt(this.numb);
                        break;
                    case "/":
                        if(parseInt(this.numb) == 0) {
                            this.sum = "除数不能为零！";
                            break;
                        }
                        this.sum = parseInt(this.numa) / parseInt(this.numb);
                        break;
                }
            }
        }
    })
</script>
</html>
